<template>
  <div :id="id" :style="{ width: width, height: height }"></div>
</template>

<script>
export default {
  name: "Echarts",
  props: {
    id: {
      type: String,
      default: "myChart",
    },
    width: {
      type: String,
      default: "400px",
    },

    height: {
      type: String,
      default: "400px",
    },
    options: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },

  mounted() {
    this.drawLine();
  },

  methods: {
    drawLine() {
      let myChart = this.echarts.init(document.getElementById(this.$props.id));
      myChart.setOption(this.$props.options);
    },
  },
};
</script>
